<template>
  <div v-loading="loading">
    <div v-if="recordList.length" class="recordList">
      <template v-for="(item, index) in recordList">
        <div v-if="index === 0 && !type" :key="index" :class="{'selected':currentVersion === -1}" class="fix-item" @click="freshDetail"><div class="version">返回当前版本</div></div>
        <recordItem v-else :item="item" :key="index" :type="type" :class="{'selected':currentVersion === item.version}" @changeVersion="changeVersion"/>
      </template>
    </div>
    <empty-placeholder v-else :empty-img="emptyImg" style="height: 400px;" text="暂无修改记录"/>
  </div>
</template>
<script>
import { format } from '@/filters/date';
import recordItem from './module/recordItem';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
// api
import { getRecords } from '@/api/process';
import emptyImg from '@/assets/empty-table-data.png';
export default {
  name: 'RecordList',
  components: {
    recordItem,
    EmptyPlaceholder
  },
  filters: {
    format
  },
  props: {
    id: {
      type: Number | String,
      default: ''
    },
    type: {// 0固定表单 1自定义表单
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      emptyImg,
      recordList: [],
      currentVersion: -1,
      loading: false
    };
  },
  created() {
    this.getRecords();
  },
  methods: {
    getRecords() {
      this.loading = true;
      getRecords({ id: this.id, type: this.type }).then(res => {
        this.loading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
        }
        this.recordList = res.data || [];
        if (this.type === 0) {
          this.recordList.unshift({ version: -1 });
          this.freshDetail();
        } else {
          this.currentVersion = res.data && res.data.length && res.data[0].version || 0;
        }
      }).catch(err => {
        this.loading = false;
        console.log(err);
      });
    },
    setCurrentVersion() {
      this.$emit('setCurrentVersion', this.currentVersion === -1);
    },
    changeVersion(item) {
      this.currentVersion = item.version;
      if (this.type === 0) { // 固定表单请求详情数据
        this.setCurrentVersion();
        this.$emit('getHistoryDetail', item.id);
      }
    },
    freshDetail() {
      this.currentVersion = -1;
      this.setCurrentVersion();
      this.$emit('freshDetail');
    }
  }
};
</script>
<style lang="scss" scoped>
  .recordList {
    height: 100vh;
    padding: 4px 0px 12px 4px;
    .selected {
      position: relative;
      background: #fff;
      ::v-deep .item {
        background: #fff;
      }
    }
    // .selected::before {
    //   position: absolute;
    //   left: -12px;
    //   top: 0;
    //   content: '';
    //   width: 3px;
    //   height: 100%;
    //   background: #406EFF;
    // }
    // .selected::after {
    //   position: absolute;
    //   left: -9px;
    //   top: 0;
    //   content: '';
    //   width: 9px;
    //   height: 100%;
    //   background: #fff;
    // }
    .fix-item{
      position: relative;
      width: 100%;
      height: 36px;
      border-bottom: #ddd 1px solid;
      cursor: pointer;
    }
    .version {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 24px;
      border: 1px solid #406eff;
      border-radius: 4px;
      color: #406eff;
      font-size: 12px;
    }
  }
</style>
